<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea template Demo</title>
    <style>
        :root {
            --primary-color: #3498db;
            --primary-hover: #2980b9;
            --border-color: #ddd;
            --bg-color: #f9f9f9;
            --text-color: #333;
            --success-color: #2ecc71;
            --error-color: #e74c3c;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 15px 20px;
            text-align: center;
        }
        
        h1 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        .repo-link {
            display: inline-block;
            margin-left: 10px;
            color: white;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        
        .repo-link:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
        
        .title-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .description {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 20px;
        }
        
        .form-row {
            margin-bottom: 15px;
            display: flex;
            gap: 20px;
        }
        
        .form-group {
            flex: 1;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
        }
        
        .editors {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .editor-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .editor-label {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .editor {
            height: 400px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            resize: vertical;
            background-color: #f8f8f8;
            white-space: pre;
            overflow: auto;
        }
        
        .actions {
            text-align: center;
            margin-top: 20px;
        }
        
        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }
        
        button:hover {
            background-color: var(--primary-hover);
        }
        
        .status-message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            text-align: center;
            display: none;
        }
        
        .status-message.success {
            background-color: rgba(46, 204, 113, 0.2);
            color: #27ae60;
            border: 1px solid #2ecc71;
        }
        
        .status-message.error {
            background-color: rgba(231, 76, 60, 0.2);
            color: #c0392b;
            border: 1px solid #e74c3c;
        }
        
        .request-preview {
            margin-top: 20px;
            display: none;
        }
        
        .response-header {
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .preview-toggle {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            text-decoration: underline;
            margin-bottom: 10px;
        }
        
        .response-content {
            background-color: #f8f8f8;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow: auto;
            max-height: 300px;
        }
        
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .editors {
                flex-direction: column;
            }
            
            .editor {
                height: 300px;
            }
            
            .title-container {
                flex-direction: column;
            }
            
            .repo-link {
                margin-left: 0;
                margin-top: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="title-container">
                <h1>Tea template Demo</h1>
                <a href="https://gitcode.com/naxida/tea_template_demo" target="_blank" class="repo-link">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle; margin-right: 4px;">
                        <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
                    </svg>
                    查看源码
                </a>
            </div>
            <div class="description">将 HTML 模板和 JSON 数据发送到渲染服务</div>
        </header>
        
        <div class="content">
            <div class="form-row">
                <div class="form-group">
                    <label for="template-select">选择模板:</label>
                    <select id="template-select">
                        <option value="demo1">示例模板 1 (简单)</option>
                        <option value="demo2">示例模板 2 (中等)</option>
                        <option value="demo3">示例模板 3 (复杂)</option>
                        <option value="custom">自定义模板</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="template-engine">模板引擎:</label>
                    <select id="template-engine">
                        <option value="cjmustache">cjmustache</option>
                    </select>
                </div>
            </div>
            
            <div class="editors">
                <div class="editor-container">
                    <div class="editor-label">HTML 模板:</div>
                    <textarea id="html-editor" class="editor" placeholder="在此输入 HTML 代码..."></textarea>
                </div>
                
                <div class="editor-container">
                    <div class="editor-label">JSON 数据:</div>
                    <textarea id="json-editor" class="editor" placeholder="在此输入 JSON 数据..."></textarea>
                </div>
            </div>
            
            <div class="actions">
                <button id="preview-button">预览请求</button>
                <button id="send-button">发送请求</button>
            </div>
            
            <div id="status-message" class="status-message"></div>
            
            <div class="request-preview" id="request-preview">
                <div class="response-header">
                    <span>请求预览</span>
                    <button class="preview-toggle" id="hide-preview">隐藏预览</button>
                </div>
                <div class="response-content" id="preview-content"></div>
            </div>
        </div>
    </div>
    
    <script>
        // 获取DOM元素
        const templateSelect = document.getElementById('template-select');
        const templateEngineSelect = document.getElementById('template-engine');
        const htmlEditor = document.getElementById('html-editor');
        const jsonEditor = document.getElementById('json-editor');
        const previewButton = document.getElementById('preview-button');
        const sendButton = document.getElementById('send-button');
        const requestPreview = document.getElementById('request-preview');
        const previewContent = document.getElementById('preview-content');
        const hidePreview = document.getElementById('hide-preview');
        const statusMessage = document.getElementById('status-message');
        
        // 预定义模板
        const templates = {
            demo1: {
                html: `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            background-color: #3498db;
            color: white;
            padding: 1rem;
            text-align: center;
            border-radius: 4px;
        }
        .content {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>{{heading}}</h1>
    </header>
    <div class="content">
        <p>{{content}}</p>
    </div>
</body>
</html>`,
                json: `{
  "title": "基础模板示例",
  "heading": "欢迎使用基础模板",
  "content": "这是一个简单的模板示例，包含基本的标题和内容区域。"
}`
            },
            demo2: {
                html: `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <style>
        :root {
            --primary-color: #3498db;
            --primary-hover: #2980b9;
            --border-color: #ddd;
            --bg-color: #f9f9f9;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .content {
            padding: 20px;
        }
        
        .feature {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: var(--bg-color);
        }
        
        .feature h3 {
            margin-top: 0;
            color: var(--primary-color);
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>{{heading}}</h1>
            <p>{{tagline}}</p>
        </header>
        
        <div class="content">
            <div class="feature">
                <h3>{{feature1.title}}</h3>
                <p>{{feature1.description}}</p>
            </div>
            
            <div class="feature">
                <h3>{{feature2.title}}</h3>
                <p>{{feature2.description}}</p>
            </div>
            
            <div class="feature">
                <h3>{{feature3.title}}</h3>
                <p>{{feature3.description}}</p>
            </div>
        </div>
        
        <footer>
            {{footer}}
        </footer>
    </div>
</body>
</html>`,
                json: `{
  "title": "中等复杂度模板示例",
  "heading": "产品功能展示",
  "tagline": "这是一个展示产品特性的中等复杂度模板",
  "feature1": {
    "title": "响应式设计",
    "description": "我们的产品完全响应式，在任何设备上都能完美展示。"
  },
  "feature2": {
    "title": "易于使用",
    "description": "简洁的界面设计让用户可以快速上手，无需复杂的学习过程。"
  },
  "feature3": {
    "title": "强大的功能",
    "description": "虽然简单易用，但我们提供了强大的功能来满足各种复杂需求。"
  },
  "footer": "© 2025 示例公司. 保留所有权利。"
}`
            },
            demo3: {
                html: `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <style>
        :root {
            --primary-color: #3498db;
            --primary-hover: #2980b9;
            --secondary-color: #2ecc71;
            --secondary-hover: #27ae60;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --border-color: #ddd;
            --bg-color: #f9f9f9;
            --text-color: #333;
            --text-light: #7f8c8d;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
        }
        
        .nav-menu li {
            margin-left: 20px;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }
        
        .nav-menu a:hover {
            opacity: 0.8;
        }
        
        /* Hero Section */
        .hero {
            background-color: var(--dark-color);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 30px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .btn {
            display: inline-block;
            background-color: var(--secondary-color);
            color: white;
            padding: 12px 24px;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: var(--secondary-hover);
        }
        
        /* Features */
        .features {
            padding: 80px 0;
            background-color: white;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .section-header h2 {
            font-size: 2rem;
            color: var(--dark-color);
            margin-bottom: 10px;
        }
        
        .section-header p {
            color: var(--text-light);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background-color: var(--bg-color);
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card h3 {
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 80px 0;
            background-color: var(--bg-color);
        }
        
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .testimonial-card {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .testimonial-text {
            font-style: italic;
            margin-bottom: 20px;
            color: var(--text-color);
        }
        
        .testimonial-author {
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .testimonial-position {
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* Contact */
        .contact {
            padding: 80px 0;
            background-color: white;
        }
        
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            background-color: var(--bg-color);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-group textarea {
            height: 150px;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-col h3 {
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        .footer-col ul {
            list-style: none;
        }
        
        .footer-col ul li {
            margin-bottom: 10px;
        }
        
        .footer-col a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-col a:hover {
            color: white;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }
            
            .nav-menu {
                margin-top: 15px;
            }
            
            .nav-menu li {
                margin: 0 10px;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero p {
                font-size: 1rem;
            }
            
            .section-header h2 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">{{company.name}}</div>
                <ul class="nav-menu">
                    {{#navItems}}
                    <li><a href="{{link}}">{{text}}</a></li>
                    {{/navItems}}
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1>{{hero.title}}</h1>
            <p>{{hero.description}}</p>
            <a href="{{hero.ctaLink}}" class="btn">{{hero.ctaText}}</a>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <div class="section-header">
                <h2>{{features.title}}</h2>
                <p>{{features.description}}</p>
            </div>
            <div class="features-grid">
                {{#features.items}}
                <div class="feature-card">
                    <h3>{{title}}</h3>
                    <p>{{description}}</p>
                </div>
                {{/features.items}}
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="testimonials">
        <div class="container">
            <div class="section-header">
                <h2>{{testimonials.title}}</h2>
                <p>{{testimonials.description}}</p>
            </div>
            <div class="testimonial-grid">
                {{#testimonials.items}}
                <div class="testimonial-card">
                    <p class="testimonial-text">"{{text}}"</p>
                    <div class="testimonial-author">{{author}}</div>
                    <div class="testimonial-position">{{position}}</div>
                </div>
                {{/testimonials.items}}
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="contact">
        <div class="container">
            <div class="section-header">
                <h2>{{contact.title}}</h2>
                <p>{{contact.description}}</p>
            </div>
            <div class="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" placeholder="{{contact.namePlaceholder}}">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" placeholder="{{contact.emailPlaceholder}}">
                </div>
                <div class="form-group">
                    <label for="message">Leave a message</label>
                    <textarea id="message" placeholder="{{contact.messagePlaceholder}}"></textarea>
                </div>
                <button class="btn">{{contact.buttonText}}</button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                {{#footerColumns}}
                <div class="footer-col">
                    <h3>{{title}}</h3>
                    <ul>
                        {{#links}}
                        <li><a href="{{url}}">{{text}}</a></li>
                        {{/links}}
                    </ul>
                </div>
                {{/footerColumns}}
            </div>
            <div class="copyright">
                {{copyright}}
            </div>
        </div>
    </footer>
</body>
</html>`,
                json: `{
  "title": "复杂模板示例",
  "company": {
    "name": "TeaTemplate"
  },
  "navItems": [
    { "text": "首页", "link": "#" },
    { "text": "功能", "link": "#features" },
    { "text": "评价", "link": "#testimonials" },
    { "text": "联系我们", "link": "https://gitcode.com/SIGCANGJIE" }
  ],
  "hero": {
    "title": "现代化的模板渲染解决方案",
    "description": "TeaTemplate 提供易于使用的模板渲染系统",
    "ctaText": "立即开始",
    "ctaLink": "https://gitcode.com/naxida/tea_template"
  },
  "features": {
    "title": "强大的功能",
    "description": "探索我们开源项目的核心功能，满足您的各种需求。",
    "items": [
      {
        "title": "灵活的语法",
        "description": "支持多种模板语法，可以轻松适应您现有的开发习惯。"
      },
      {
        "title": "完整的文档",
        "description": "详细的文档和示例帮助您快速上手并解决问题。"
      },
      {
        "title": "社区支持",
        "description": "提供社区的技术支持，确保您的项目顺利进行。"
      }
    ]
  },
  "testimonials": {
    "title": "评价",
    "description": "看看其他人如何评价我们的开源项目。",
    "items": [
      {
        "text": "TeaTemplate 让我们的前端开发效率提高了30%，是一个非常棒的工具。",
        "author": "张伟",
        "position": "XYZ科技社区开发者"
      },
      {
        "text": "我们尝试了多种模板引擎，但只有TeaTemplate能满足我们的所有需求。",
        "author": "李娜",
        "position": "ABC公司社区开发者"
      },
      {
        "text": "简洁的API和详细的文档让集成变得非常容易，强烈推荐！",
        "author": "王强",
        "position": "自由职业者"
      }
    ]
  },
  "contact": {
    "title": "联系我们",
    "description": "有任何问题或建议？请随时与我们联系。",
    "namePlaceholder": "请输入您的姓名",
    "emailPlaceholder": "请输入您的邮箱",
    "messagePlaceholder": "请输入您的留言",
    "buttonText": "发送信息"
  },
  "footerColumns": [
    {
      "title": "开源项目",
      "links": [
        { "text": "功能", "url": "#" },
        { "text": "案例", "url": "#" },
        { "text": "价格", "url": "#" },
        { "text": "文档", "url": "#" }
      ]
    },
    {
      "title": "社区",
      "links": [
        { "text": "关于我们", "url": "https://gitcode.com/SIGCANGJIE" },
        { "text": "博客", "url": "#" },
        { "text": "合作伙伴", "url": "#" },
        { "text": "招聘", "url": "#" }
      ]
    },
    {
      "title": "支持",
      "links": [
        { "text": "帮助中心", "url": "#" },
        { "text": "联系支持", "url": "#" },
        { "text": "状态", "url": "#" },
        { "text": "API文档", "url": "#" }
      ]
    }
  ],
  "copyright": "© 2025 TeaTemplate. 保留所有权利。"
}`
            },
            custom: {
                html: `<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{heading}}</h1>
    <p>{{content}}</p>
</body>
</html>`,
                json: `{
  "title": "自定义页面",
  "heading": "自定义标题",
  "content": "自定义内容"
}`
            }
        };
        
        // 格式化JSON以便显示
        function formatJSON(json) {
            return JSON.stringify(json, null, 2);
        }
        
        // 显示状态消息
        function showStatusMessage(message, type) {
            statusMessage.textContent = message;
            statusMessage.className = `status-message ${type}`;
            statusMessage.style.display = 'block';
            
            // 5秒后自动隐藏消息
            setTimeout(() => {
                statusMessage.style.display = 'none';
            }, 5000);
        }
        
        // 根据选择的模板更新编辑器内容
        function updateEditorContent() {
            const selectedTemplate = templateSelect.value;
            
            // 填充预定义模板
            const template = templates[selectedTemplate];
            htmlEditor.value = template.html;
            jsonEditor.value = template.json;
        }
        
        // 构建请求体
        function buildRequestBody() {
            const templateEngine = templateEngineSelect.value;
            const htmlCode = htmlEditor.value;
            const jsonString = jsonEditor.value.trim();
            
            // 验证JSON格式是否正确，但不解析它
            try {
                JSON.parse(jsonString);
            } catch (error) {
                throw new Error('JSON 格式错误: ' + error.message);
            }
            
            if (!htmlCode) {
                throw new Error('HTML 模板不能为空');
            }
            
            // 构建符合要求的请求体，content作为字符串发送
            const requestBody = {
                engineName: templateEngine,
                htmlTemplate: htmlCode,
                jsonContent: jsonString // 直接发送JSON字符串，而不是解析后的对象
            };
            
            return requestBody;
        }
        
        // 在新窗口中打开响应内容
        function openResponseWindow(content, isJson) {
            // 生成唯一的窗口名称，确保每次都打开新窗口
            const uniqueWindowName = 'render_' + Date.now();
            
            // 创建一个新窗口，使用唯一名称而不是_blank
            const newWindow = window.open('', uniqueWindowName);
            
            if (!newWindow) {
                showStatusMessage('浏览器阻止了弹出窗口，请允许弹出窗口后重试。', 'error');
                return;
            }
            
            // 设置新窗口的标题
            newWindow.document.title = 'render show';
            
            // 清空新窗口的内容
            newWindow.document.open();
            
            // 如果是JSON，创建一个格式化的JSON查看器
            if (isJson) {
                const formattedJson = formatJSON(JSON.parse(content));
                
                newWindow.document.write(`
                    <!DOCTYPE html>
                    <html lang="zh-CN">
                    <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>render show</title>
                        <style>
                            body {
                                font-family: 'Arial', sans-serif;
                                line-height: 1.6;
                                color: #333;
                                padding: 20px;
                                background-color: #f5f5f5;
                                margin: 0;
                            }
                            .container {
                                max-width: 1200px;
                                margin: 0 auto;
                                background-color: white;
                                border-radius: 8px;
                                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                                padding: 20px;
                            }
                            .header {
                                margin-bottom: 20px;
                                padding-bottom: 10px;
                                border-bottom: 1px solid #eee;
                            }
                            .json-content {
                                background-color: #f8f8f8;
                                border: 1px solid #ddd;
                                border-radius: 4px;
                                padding: 15px;
                                font-family: monospace;
                                white-space: pre-wrap;
                                overflow: auto;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <div class="header">
                                <h1>JSON 响应结果</h1>
                            </div>
                            <div class="json-content">${formattedJson}</div>
                        </div>
                    </body>
                    </html>
                `);
            } else {
                // 如果不是JSON，直接写入内容（假设是HTML）
                newWindow.document.write(content);
            }
            
            newWindow.document.close();
        }
        
        // 预览请求
        previewButton.addEventListener('click', () => {
            try {
                const requestBody = buildRequestBody();
                previewContent.textContent = formatJSON(requestBody);
                requestPreview.style.display = 'block';
            } catch (error) {
                showStatusMessage(error.message, 'error');
            }
        });
        
        // 隐藏预览
        hidePreview.addEventListener('click', () => {
            requestPreview.style.display = 'none';
        });
        
        // 发送请求
        sendButton.addEventListener('click', async () => {
            try {
                const requestBody = buildRequestBody();
                
                // 显示发送中状态
                sendButton.disabled = true;
                sendButton.textContent = '发送中...';
                
                // 发送POST请求
                const response = await fetch('http://localhost:8080/render', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestBody)
                });
                
                // 获取响应文本
                const responseText = await response.text();
                
                // 恢复按钮状态
                sendButton.disabled = false;
                sendButton.textContent = '发送请求';
                
                // 检查是否是JSON
                let isJson = false;
                try {
                    JSON.parse(responseText);
                    isJson = true;
                } catch {
                    isJson = false;
                }
                
                // 在新窗口中打开响应内容
                openResponseWindow(responseText, isJson);
                
                // 显示成功消息
                if (response.ok) {
                    showStatusMessage(`请求成功 (${response.status})，已在新窗口中打开结果`, 'success');
                } else {
                    showStatusMessage(`请求返回错误 (${response.status})，已在新窗口中显示详情`, 'error');
                }
                
            } catch (error) {
                // 恢复按钮状态
                sendButton.disabled = false;
                sendButton.textContent = '发送请求';
                
                // 显示错误
                showStatusMessage(`请求失败: ${error.message}`, 'error');
            }
        });
        
        // 添加模板选择变更事件监听器
        templateSelect.addEventListener('change', updateEditorContent);
        
        // 初始化页面时设置默认模板
        updateEditorContent();
    </script>
</body>
</html>